<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>鼠标经过修改图片路径</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
            background-color: #666;
        }
        section{
            width: 216px;
            margin: 10px auto;
            background-color: #fff;
            padding: 5px;
        }

        section ul{
            margin: 0;
            padding: 0;
            list-style-type: none;
            overflow: hidden;
        }
        section li{
            width: 50px;
            height: 50px;
            float: left;
            margin: 2px;
            border-radius: 5px;
            overflow: hidden;
        }
        li.first{
            width: 158px;
            height: 158px;
        }
        .first img{
            width: 100%;
        }

    </style>
</head>
<body>
    <section>
        <ul>
            <li class="first"><img src="img/big_1.jpg" alt=""></li>
            <li><a href="javascript:;"><img src="img/small_1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/small_2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/small_3.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/small_4.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/small_5.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/small_6.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/small_7.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/small_8.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/small_9.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/small_10.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/small_11.jpg" alt=""></a></li>
        </ul>
    </section>
</body>
</html>

<script>
    var imgs = document.querySelectorAll('img');
    console.log(imgs);

    // 从第二张开始，给每一张添加鼠标进来的事件
    for(var i = 1; i < imgs.length; i++){
        imgs[i].index = i;
        imgs[i].onmouseover = function(){
            // 方式一：
            // imgs[0].src = 'img/big_' + this.index + '.jpg';

            // 方式二：
            // replace() 替换字符串
            // 参数1：替换掉的内容   参数2：替换后的内容
            imgs[0].src = this.src.replace('small','big');
        }

    }

    
</script>